<template>
	<view class="content_box">
		<view class="u-flex u-col-center wrapper-box">
		
			
			<view class="scroll-box" style="background-color: #F6F6F6; background: linear-gradient(270deg, #F6FBFE 100%, #FFFFFF 100%);">
				<scroll-view class="left u-flex-col u-col-center" enable-back-to-top scroll-y>
					<view class="type-list u-ellipsis-1" :class="[{ 'list-active': categoryIndex == index }]" :style="{'color':categoryIndex == index?$COLOR:''}" v-for="(item, index) in childrenList" :key="index" @tap="onType(index,item.id)">
						<!-- <view class="line" :class="[{ 'line-active': categoryIndex == index }]" ></view> -->
						{{ item.tit }}
					</view>
					<view class="hack-tabbar"></view>
				</scroll-view>
			</view>
			<view style="height: 100%;width: 100%;">
				<view class="content_box">
					<scroll-view scroll-y="true" enable-back-to-top class="scroll_view">
						<view class="goods-item u-m-b-16" v-for="item in productList" :key="item.id" @tap="$Router.push({ path: '/pages/goods/detail', query: { id: item.id } })">
							<view class="big-goods  u-flex u-p-20 u-col-top ">
								<image class="goods-img"  lazy-load fade-show :src="item.slideshows[0]" mode="aspectFill"></image>
								<view class=" card-right u-m-l-20 u-flex-col u-row-between">
									<view class="">
										<view class="goods-title u-ellipsis-1 u-m-t-10 u-m-b-10">
											<!-- <view class="title-tag cu-tag bg-red sm radius u-m-r-10">秒杀</view> -->
											{{ item.tit }}
										</view>
										<!-- <view class="subtitle-text u-m-b-10 u-ellipsis-1">全新未拆封</view> -->
									</view>
				
									<!-- <view class="u-flex u-m-y-20">
										<view class="cu-progress round sm" style="width:210rpx;"><view :style="[{ width: item.percent + '%',backgroundColor:'#ffbbbb' }]"></view></view>
										<view class="progress-text">已售出{{ item.sales }}件</view>
									</view> -->
				
									<view class=" u-flex u-row-between u-col-center">
										<view class="u-flex u-col-bottom font-OPPOSANS">
											 <view class="price u-m-r-10">{{ item.price }} <text>{{ item.productType == 1 ? '/天':'/件'}}</text></view>
											<!-- <view class="origin-price">{{ item.price }}</view> -->
										</view>
										<button class="u-reset-button buy-btn" :style="{background: $COLOR}">立即购买</button>
									</view>
								</view>
							</view>
						</view>
						<!-- 空白 -->
						<shopro-empty
							v-show="!childrenList.length"
							:image="$IMAGE_URL + '/imgs/empty/empty_goods.png'"
							tipText="暂无该商品，还有更多好货等着你噢~"
						></shopro-empty>
						<!-- 加载更多 -->
						<!-- <u-loadmore v-if="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" /> -->
					</scroll-view>
				</view>
				<!-- <scroll-view scroll-x class="scroll-box" enable-back-to-top scroll-with-animation>
					<view class="right" v-if="childrenList.lenth">
						<image class="type-img" v-if="categoryData[categoryIndex].image" :src="categoryData[categoryIndex].image" mode="aspectFill"></image>

						<view class="item-list" v-for="(list, index1) in categoryData[categoryIndex].childrenList" :key="index1">
							<view class="type-box u-flex u-row-between u-col-center">
								<text class="type-title">{{ list.tit }}</text>
								<view class="more u-flex u-col-center" @tap="jump('/pages/goods/list', { id: list.id })">
									<text>查看更多</text>
									<view class="u-iconfont uicon-arrow-right" style="color: #999;font-size: 28rpx;"></view>
								</view>
							</view>
							<view class="item-box u-flex">
								<view class="u-flex-col goods-item" @tap="jump('/pages/goods/list', { id: mlist.id })" v-for="(mlist, index2) in list.children" :key="index2">
									<image class="item-img" lazy-load :src="mlist.image" mode="aspectFill"></image>
									<view class="item-title u-ellipsis-1 ">{{ mlist.name }}</view>
								</view>
							</view>
						</view>
						<shopro-empty
							v-show="!childrenList.length"
							:image="$IMG_URL + '/imgs/empty/empty_goods.png'"
							tipText="暂无该商品，还有更多好货等着你噢~"
						></shopro-empty>
						<view class="hack-tabbar"></view>
					</view>
				</scroll-view> -->
			</view>
		</view>
	</view>
</template>

<script>
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
	components: {},
	data() {
		return {
			categoryIndex: 0,
			// categoryData: {}，
			productList:[]
		};
	},
	computed: {},
	 watch:{
	    childrenList:{
	      handler(newValue,oldValue){  //newValue 新的值，oldValue变化前的值
			this.categoryIndex = 0
			this.getCategory(newValue[0].id)
	      }
	    },
	  },
	props: ['childrenList'],
	async created() {
		console.log('%c当前分类：三级分类', 'color:green;background:yellow');
		// await this.getCategory();
	},
	methods: {
		getCategory(id){
			this.$http('category.list',{
				tid:id,
				page:0,
				rows:30
			}).then(res => {
				if (res.code === 200) {
					console.log(123,res.data.list)
					// 过滤掉租赁商品
					res.data.list  = res.data.list.filter(item  => item.productType  !== 1);
					this.dataPromise(res.data.list).then(res=>{
						this.productList = res
						console.log(456,this.productList)
					})
				}
			});
		},
		// 转价格
		dataPromise(list){
			return new Promise((relose, reject)=>{
				list.forEach((item) => {
					item.category = JSON.parse(item.category)
					item.colors = JSON.parse(item.colors)
					item.match = JSON.parse(item.match)
					item.params = JSON.parse(item.params)
					item.slideshows = JSON.parse(item.slideshows)
					console.log('商品信息',item)
					this.getminPrice(item.params,item.productType)
						.then(res => {
							item.price = res;
						})
					
				})
				relose(list)
			})
		},
	  getminPrice(params,productType){
			 return new Promise((resole,reject)=>{
				 let prices=[]
				 for (let i = 0;i<params.length;i++){
					 for (let t = 0; t < params[i].term_list.length; t++) {
						 for (let s = 0; s < params[i].term_list[t].specifications.length; s++) {
						   console.log('商品信息循环',params[i])
						   if(productType == 1){
							 let price = (params[i].term_list[t].specifications[s].money / (params[i].term_list[t].value * 100)).toFixed(2)
							 prices.push(price)
						   }else{
							 let price = (params[i].term_list[t].specifications[s].money / 100).toFixed(2)
							 prices.push(price)
							 
						   }
							
						 }
					 }
				 }
				 let minprice = Math.min.apply(null, prices);
				 resole(minprice)
			 })
		 },  

		onType(index,id) {
			this.categoryIndex = index;
			this.getCategory(id)
			
		},
		// 路由跳转
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		}
	}
};
</script>

<style lang="scss">
page{
  background: linear-gradient(90deg, #EAFDFF, #FADFE9);
}
.hack-tabbar {
	height: calc(100rpx + env(safe-area-inset-bottom) / 2);
	width: 100%;
}
.content_box {
	margin-top: 1upx;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 100%;
}

.scroll_view {
    width: 100%;
    height: calc(100vh - 175rpx);
    background: linear-gradient(270deg, #E6F4FF 0%, #F6FBFE 100%, #FFFFFF 100%);
    /* padding: 20rpx 0; */
    box-sizing: border-box;
}

.wrapper-box {
	flex: 1;
	margin-top: 1upx;
	height: 100%;
}

.scroll-box {
	height: 100%;
	flex: 1;
	background: #fff;
}

.left {
	width: 200upx;
	height: 100%;
	flex: 1;

	.list-active {
		background: #fff;
		font-weight: bold !important;
	}

	.line-active {
		background: #e6b873;
	}

	.type-list {
		height: 84upx;
		position: relative;
		width: 200rpx;
		padding-left: 16rpx;
		line-height: 84rpx;
		font-size: 28upx;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);

		.line {
			width: 10upx;
			height: 100%;
			position: absolute;
			left: 0;
		}
	}
}

.right {
	padding: 0 30upx;
	flex: 1;
	height: 100%;

	.type-img {
		width: 505rpx;
		height: 150rpx;
		background: #ccc;
		border-radius: 10rpx;
		margin-top: 30rpx;
	}

	.item-list {
		.type-box {
			height: 84rpx;

			.type-title {
				font-size: 28rpx;
				font-weight: bold;
			}

			.more {
				font-size: 26rpx;
				color: #999;
			}
		}

		.item-box {
			flex-wrap: wrap;

			.goods-item {
				margin-right: 20rpx;
				margin-bottom: 20rpx;

				&:nth-child(3n) {
					margin-right: 0;
				}

				.item-img {
					width: 150rpx;
					height: 150rpx;
					// background: #f5f5f5;
					border-radius: 6rpx;
				}

				.item-title {
					font-size: 24rpx;
					line-height: 24rpx;
					margin-top: 10rpx;
					width: 150rpx;
					text-align: center;
				}
			}
		}
	}
}
// 列表
.goods-item {
	// 大商品卡片
	.big-goods {
		width: 600rpx;
		height: 260rpx;
		// background: #ffffff;
		box-shadow: 0px 7rpx 8rpx 1rpx rgba(254, 76, 29, 0.05);
		border-radius: 20rpx;
		.goods-img {
			width: 200rpx;
			height: 220rpx;
			border-radius: 9rpx;
		}
		.card-right {
			width: 300rpx;
			height: 220rpx;
		}
		.goods-title {
			font-size: 26rpx;
			font-weight: 600;
			width: 400rpx;
			color: #000000;
		}
		.subtitle-text {
			font-size: 22rpx;
			width: 400rpx;
			font-weight: 500;
			color: #666666;
		}
		.buy-btn {
			width: 130rpx;
			// line-height: 50rpx;
			background: linear-gradient(90deg, #FF6600 0%, #FE832A 100%);
			border-radius: 25rpx;
			font-size: 24rpx;
			// font-weight: 500;
			color: #ffffff;
		}
		.progress-text {
			color: #c4c4c4;
			font-size: 20rpx;
			margin-left: 25rpx;
		}
		// 价格
		.price {
			color: #ff0000;
			font-weight: 600;
			&::before {
				content: '￥';
				font-size: 20rpx;
			}
		}
		.origin-price {
			color: #c4c4c4;
			font-size: 24rpx;
			text-decoration: line-through;
			&::before {
				content: '￥';
				font-size: 20rpx;
			}
		}
	}

	.buy-btn {
		width: 120rpx;
		line-height: 50rpx;
		background: linear-gradient(90deg, #d01325, #ed3c30);
		border-radius: 25rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #ffffff;
	}
	.btn-end,
	.btn-nostart {
		background: rgba(238, 238, 238, 1);
		color: #999999;
	}
	.btn-ing {
		background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
		box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
		color: rgba(255, 255, 255, 1);
	}
}
</style>
